<template>
  <div>
    <v-centerForm>
      <template slot='left'>
        <el-form inline :model="searchObject" ref="searchObject" label-width="50px">
          <el-form-item>
            <el-button size="mini" icon="el-icon-search" type="primary" @click="search">搜索</el-button>
            <el-button size="mini" icon="el-icon-refresh-left" @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot='right'>
        <el-upload :action="importUrl"
                   :show-file-list="false"
                   :on-success="handleImportFile" style="display: inline-block">
          <el-button size="mini" type="primary" icon="el-icon-top" style="margin-left: 10px">导入
          </el-button>
        </el-upload>
        <el-button size="mini" type="warning" icon="el-icon-bottom" style="margin-left: 10px" @click="handleExportFile">
          导出
        </el-button>
        <el-button size="mini" icon="el-icon-delete" type="danger" @click="removeBatchDialog"
                   :disabled="tableSelectData.length === 0">批量删除
        </el-button>
      </template>
    </v-centerForm>
    <x-table :loading="loadingBtn.tableLoading" :columnData="columnData" :tableData="tableData"
             :tableSize="pagination.size" :tableTotal="pagination.total" @currentPage="getCurrent" @pageSize="getSize"
             @selectionChange="selectionChange">
      <el-table-column slot="selection" :selectable="row=>!row.init" type="selection" align="center">
      </el-table-column>
      <el-table-column align="center" slot="operate" label="操作选项" width="200">
        <template slot-scope="scope" v-if="!scope.row.init">
          <el-tooltip class="item" effect="dark" content="新增" placement="top">
            <i class="el-icon-circle-plus-outline table-icon-btn color-primary"
               @click="addOrSeeOrEdit('新增','add', scope.row)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="查看" placement="top">
            <i class="el-icon-view table-icon-btn color-success" @click="addOrSeeOrEdit('查看','see', scope.row)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <i class="el-icon-edit-outline table-icon-btn color-primary"
               @click="addOrSeeOrEdit('编辑','edit', scope.row)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <i class="el-icon-delete table-icon-btn color-error" @click="removeDialog(scope.row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </x-table>
    <el-dialog :title="dialog.title" :visible.sync="dialogVisible" @closed="closeDialog">
      <el-form :disabled="dialog.flag === 'see'" :model="form" ref="form" :rules="rules" :label-width="formLabelWidth">
                                                                                                  <el-form-item label="创建时间" prop="createTime">
                <el-input v-model="form.createTime" placeholder="请输入创建时间" disabled></el-input>
              </el-form-item>
                                                                                    <el-form-item label="更新时间" prop="updateTime">
                <el-input v-model="form.updateTime" placeholder="请输入更新时间" disabled></el-input>
              </el-form-item>
                                                                  <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
              </el-form-item>
                                                                  <el-form-item label="年龄" prop="age">
                <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
              </el-form-item>
                                                                  <el-form-item label="描述信息" prop="description">
                <el-input v-model="form.description" placeholder="请输入描述信息"></el-input>
              </el-form-item>
                                    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import testApi from '@/api/system/testApi'
  import { axiosBaseUrl } from '@/common/config/baseConfig'
  import xTable from '@/components/xTable/x-table'

  export default {
    name: 'testList',
    components: { xTable },
    data () {
      return {
        importUrl: axiosBaseUrl + '/api/v1/test/importFile',
        exportUrl: axiosBaseUrl + '/api/v1/test/exportFile',
        loadingBtn: {
          tableLoading: false
        },
        searchObject: {},
        tableData: [],
        tableSelectData: [],
        columnData: [
          {
            slot: 'selection'
          },
          {
            type: 'index',
            label: '序号'
          },
                                                                                                    {
              label: '创建时间',
              prop: 'createTime'
            },
                                                                    {
              label: '更新时间',
              prop: 'updateTime'
            },
                                              {
              label: '姓名',
              prop: 'name'
            },
                                              {
              label: '年龄',
              prop: 'age'
            },
                                              {
              label: '描述信息',
              prop: 'description'
            },
                                {
            slot: 'operate',
            label: '操作选项'
          }
        ],
        rules: {
                                                                                                                                                                        name: [
                {
                  required: true,
                  message: '姓名不能为空',
                  trigger: 'blur'
                }
              ],
                                                age: [
                {
                  required: true,
                  message: '年龄不能为空',
                  trigger: 'blur'
                }
              ],
                                                description: [
                {
                  required: true,
                  message: '描述信息不能为空',
                  trigger: 'blur'
                }
              ]
                              },
        pagination: {
          current: 1,
          size: 10,
          total: 0
        },
        dialog: {
          title: '',
          flag: ''
        },
        dialogVisible: false,
        form: {},
        formLabelWidth: '100px'
      }
    },
    created () {
      this.selectPage()
    },
    methods: {
      search () {
        this.selectPage()
      },
      resetSearch () {
        this.searchObject = {}
        this.selectPage()
      },
      getCurrent (value) {
        this.pagination.current = value
        this.selectPage()
      },
      getSize (value) {
        this.pagination.size = value
        this.selectPage()
      },
      async addOrSeeOrEdit (title, flag, row) {
        this.dialog.title = title
        this.dialog.flag = flag
        this.dialogVisible = true
        if (flag === 'see' || flag === 'edit') {
          const { data: res } = await testApi.selectOneOfTest(row.id)
          this.form = res
        } else {
          this.$nextTick(() => {
            this.$refs.form.clearValidate()
          })
        }
      },
      removeDialog (row) {
        this.$confirm('是否确认删除？', '确认删除').then(_ => {
          this.remove(row)
        }).catch(_ => {
        })
      },
      async remove (row) {
        const {
          code,
          msg
        } = await testApi.deleteOfTest(row.id)
        if (code === this.$constant.SUCCESS) {
          this.$message.success(msg)
          await this.selectPage()
        } else {
          this.$message.error(msg)
        }
      },
      selectionChange (value) {
        this.tableSelectData = value
      },
      removeBatchDialog () {
        this.$confirm('是否确认批量删除？', '确认批量删除').then(_ => {
          this.removeBatch()
        }).catch(_ => {
        })
      },
      async removeBatch () {
        const idList = this.tableSelectData.map(item => item.id)
        const {
          code,
          msg
        } = await testApi.deleteBatchOfTest(idList)
        if (code === this.$constant.SUCCESS) {
          await this.selectPage()
          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      },
      async handleImportFile ({
                                code,
                                msg
                              }) {
        if (code === this.$constant.SUCCESS) {
          this.$message.success(msg)
          await this.selectPage()
        } else {
          this.$message.error(msg)
        }
      },
      async handleExportFile () {
        const confirm = await this.$confirm('是否确认导出？', '确认导出')
        if (confirm) {
          window.open(this.exportUrl)
        }
      },
      async selectPage () {
        this.loadingBtn.tableLoading = true
        const {
          code,
          msg,
          data
        } = await testApi.selectPageOfTest(this.pagination.current, this.pagination.size, this.searchObject)
        if (code === this.$constant.SUCCESS) {
          this.tableData = data.records
          this.pagination.total = data.total
          this.loadingBtn.tableLoading = false
        } else {
          this.$message.error(msg)
        }
      },
      closeDialog () {
        this.form = {}
        this.dialog.flag = ''
        this.dialog.title = ''
      },
      async submitForm () {
        if (this.dialog.flag === 'see') {
          this.dialogVisible = false
          return
        }
        await this.$refs.form.validate(async (valid) => {
        if (valid) {
        const params = this.form
        if (this.dialog.flag === 'edit') {
        const {
        code,
        msg
        } = await testApi.updateOfTest(params)
        if (code === this.$constant.SUCCESS) {
        await this.selectPage()
        this.$message.success(msg)
        this.dialogVisible = false
        } else {
        this.$message.error(msg)
        }
        } else {
        const {
        code,
        msg
        } = await testApi.insertOfTest(params)
        if (code === this.$constant.SUCCESS) {
        await this.selectPage()
        this.$message.success(msg)
        this.dialogVisible = false
        } else {
        this.$message.error(msg)
        }
        }
        } else {
        return false
        }
        })
      }
    }
  }
</script>

<style scoped>

</style>
